<div class="easyui-layout" data-options="fit:true">

	<div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px; padding:5px;">
		<ul id="wu-category-tree" class="easyui-tree"></ul>
	</div>


	<div data-options="region:'center',border:false">
		<!-- Begin of toolbar -->
		<div id="wu-toolbar">
			<div class="wu-toolbar-button">
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel()" plain="true">取消</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-print" onclick="openAdd()" plain="true">打印</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-help" onclick="openEdit()" plain="true">帮助</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-undo" onclick="remove()" plain="true">撤销</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-redo" onclick="cancel()" plain="true">重做</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-sum" onclick="reload()" plain="true">总计</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-back" onclick="reload()" plain="true">返回</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-tip" onclick="reload()" plain="true">提示</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="reload()" plain="true">保存</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="reload()" plain="true">剪切</a>
			</div>
			<div class="wu-toolbar-search">
				<label>起始时间：</label>
				<input class="easyui-datebox" style="width:100px">
				<label>结束时间：</label>
				<input class="easyui-datebox" style="width:100px">
				<label>用户组：</label>
				<select class="easyui-combobox" panelHeight="auto" style="width:100px">
					<option value="0">选择用户组</option>
					<option value="1">黄钻</option>
					<option value="2">红钻</option>
					<option value="3">蓝钻</option>
				</select>
				<label>关键词：</label>
				<input class="wu-text" style="width:100px">
				<a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
			</div>
		</div>
		<!-- End of toolbar -->
		<table id="wu-datagrid" toolbar="#wu-toolbar"></table>
	</div>
</div>
<!-- Begin of easyui-dialog -->
<div id="wu-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
	<form id="wu-form" method="post">
		<table>
			<tr>
				<td width="60" align="right">姓 名:</td>
				<td>
					<input type="text" name="name" class="wu-text" />
				</td>
			</tr>
			<tr>
				<td align="right">邮 箱:</td>
				<td>
					<input type="text" name="email" class="wu-text" />
				</td>
			</tr>
			<tr>
				<td align="right">主 题:</td>
				<td>
					<input type="text" name="subject" class="wu-text" />
				</td>
			</tr>
			<tr>
				<td valign="top" align="right">内 容:</td>
				<td>
					<textarea name="content" rows="6" class="wu-textarea" style="width:260px"></textarea>
				</td>
			</tr>
		</table>
	</form>
</div>
<!-- End of easyui-dialog -->
<script type="text/javascript">
	/**
	 * Name 载入菜单树
	 */
	setTimeout(function () {
		$('#wu-category-tree').tree({
			url: 'temp/menu.php',
			onClick: function (node) {
				alert(node.text);
			}
		});
	}, 0);


	/**
	 * Name 添加记录
	 */
	function add() {
		$('#wu-form').form('submit', {
			url: '',
			success: function (data) {
				if (data) {
					$.messager.alert('信息提示', '提交成功！', 'info');
					$('#wu-dialog').dialog('close');
				} else {
					$.messager.alert('信息提示', '提交失败！', 'info');
				}
			}
		});
	}

	/**
	 * Name 修改记录
	 */
	function edit() {
		$('#wu-form').form('submit', {
			url: '',
			success: function (data) {
				if (data) {
					$.messager.alert('信息提示', '提交成功！', 'info');
					$('#wu-dialog').dialog('close');
				} else {
					$.messager.alert('信息提示', '提交失败！', 'info');
				}
			}
		});
	}

	/**
	 * Name 删除记录
	 */
	function remove() {
		$.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
			if (result) {
				var items = $('#wu-datagrid').datagrid('getSelections');
				var ids = [];
				$(items).each(function () {
					ids.push(this.productid);
				});
				//alert(ids);return;
				$.ajax({
					url: '',
					data: '',
					success: function (data) {
						if (data) {
							$.messager.alert('信息提示', '删除成功！', 'info');
						} else {
							$.messager.alert('信息提示', '删除失败！', 'info');
						}
					}
				});
			}
		});
	}

	/**
	 * Name 打开添加窗口
	 */
	function openAdd() {
		$('#wu-form').form('clear');
		$('#wu-dialog').dialog({
			closed: false,
			modal: true,
			title: "添加信息",
			buttons: [{
				text: '确定',
				iconCls: 'icon-ok',
				handler: add
			}, {
				text: '取消',
				iconCls: 'icon-cancel',
				handler: function () {
					$('#wu-dialog').dialog('close');
				}
			}]
		});
	}

	/**
	 * Name 打开修改窗口
	 */
	function openEdit() {
		$('#wu-form').form('clear');
		var item = $('#wu-datagrid').datagrid('getSelected');
		//alert(item.productid);return;
		$.ajax({
			url: '',
			data: '',
			success: function (data) {
				if (data) {
					$('#wu-dialog').dialog('close');
				} else {
					//绑定值
					$('#wu-form').form('load', data)
				}
			}
		});
		$('#wu-dialog').dialog({
			closed: false,
			modal: true,
			title: "修改信息",
			buttons: [{
				text: '确定',
				iconCls: 'icon-ok',
				handler: edit
			}, {
				text: '取消',
				iconCls: 'icon-cancel',
				handler: function () {
					$('#wu-dialog').dialog('close');
				}
			}]
		});
	}

	/**
	 * Name 分页过滤器
	 */
	function pagerFilter(data) {
		if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array                
			data = {
				total: data.length,
				rows: data
			}
		}
		var dg = $(this);
		var opts = dg.datagrid('options');
		var pager = dg.datagrid('getPager');
		pager.pagination({
			onSelectPage: function (pageNum, pageSize) {
				opts.pageNumber = pageNum;
				opts.pageSize = pageSize;
				pager.pagination('refresh', {
					pageNumber: pageNum,
					pageSize: pageSize
				});
				dg.datagrid('loadData', data);
			}
		});
		if (!data.originalRows) {
			data.originalRows = (data.rows);
		}
		var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
		var end = start + parseInt(opts.pageSize);
		data.rows = (data.originalRows.slice(start, end));
		return data;
	}

	/**
	 * Name 载入数据
	 */
	setTimeout(function () {
		$('#wu-datagrid').datagrid({
			url: 'temp/datagrid.php',
			loadFilter: pagerFilter,
			rownumbers: true,
			singleSelect: false,
			pageSize: 20,
			pagination: true,
			multiSort: true,
			fitColumns: true,
			fit: true,
			columns: [
				[{
						checkbox: true
					},
					{
						field: 'productid',
						title: 'productid',
						width: 100,
						sortable: true
					},
					{
						field: 'productname',
						title: 'productname',
						width: 180,
						sortable: true
					},
					{
						field: 'unitcost',
						title: 'unitcost',
						width: 100
					},
					{
						field: 'listprice',
						title: 'listprice',
						width: 100
					},
					{
						field: 'attr1',
						title: 'attr1',
						width: 100
					},
					{
						field: 'itemid',
						title: 'itemid',
						width: 100
					},
					{
						field: 'status',
						title: 'status',
						width: 100
					}
				]
			]
		});
	}, 0);
</script>